{% extends "base.html" %}
{% comment 'header' %}
# This file is part of opentaps Smart Energy Applications Suite (SEAS).

# opentaps Smart Energy Applications Suite (SEAS) is free software:
# you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.

# opentaps Smart Energy Applications Suite (SEAS) is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU Lesser General Public License for more details.

# You should have received a copy of the GNU Lesser General Public License
# along with opentaps Smart Energy Applications Suite (SEAS).
# If not, see <https://www.gnu.org/licenses/>.
{% endcomment %}

{% load static i18n %}
{% block title %}Topics{% endblock %}

{% block content %}
<div class="container">

  {% include "core/_breadcrumbs.html" %}

  {% load crispy_forms_tags %}
  <div class="card mb-3">
    <div class="card-body">
      {% if no_sites %}
        <div>Please <a href="{% url 'core:site_create' %}">set up</a> at least one Site before export configs.</div>
      {% else %}
      <form method="POST" id="export_form">
        {% csrf_token %}

        {% if current_site %}
            <h4>Site {{ current_site.description }}</h4>
            <input type="hidden" name="site_id" value="{{ current_site }}"/>
        {% else %}
            <div id="div_id_site" class="form-group">
                <label for="id_site" class="col-form-label requiredField">
                    Site<span class="asteriskField">*</span>
                </label>
                <div class="">
                    <select name="site" class="select form-control" id="id_site" v-model="selectedSite" @change="changedSite">
                        {% for c in sites_list %}
                            <option value="{{ c.id }}">{{ c.description }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
        {% endif %}
        {% if current_prefix %}
            <h4>Device prefix {{ current_prefix }}</h4>
            <input type="hidden" name="device_prefix" value="{{ current_prefix }}"/>
        {% else %}
            <div id="div_id_device_prefix" class="form-group">
                <label for="id_device_prefix" class="col-form-label" v-if="bacnetPrefixes.length">
                    Device prefix
                </label>
                <div>
                    <select name="device_prefix" id="id_device_prefix" class="select form-control"  v-if="bacnetPrefixes.length">
                        <option value="">All</option>
                        <option v-for="item in bacnetPrefixes" v-bind:value="item.id">${ item.prefix }</option>
                    </select>
                </div>
                <div :class="['alert', 'alert-danger']" role="alert"  v-if="error">
                    ${ error }
                </div>
            </div>
        {% endif %}

        {{ form.only_with_trending|as_crispy_field }}
        {{ form.his_tagged_topics_only|as_crispy_field }}

        <div class="form-group d-flex justify-content-around mt-5">
            <a href="{{ back_url }}" class="btn btn-secondary col-5" role="button"><i class="fa fa-times mr-2"></i> Go Back</a>
            <button class="btn btn-primary col-5" type="submit"><i class="fa fa-download mr-2"></i> Export Config Files</button>
        </div>
      </form>
      {% endif %}
    </div>
  </div>
</div>
<script>
(function(){
  new Vue({
    el: '#export_form',
    delimiters: ['${', '}'],
    data:{
      selectedSite: '{{ site_id|safe }}',
      bacnetPrefixes: [],
      error: null,
    },
    mounted() {
      this.changedSite()
    },
    methods:{
      changedSite:function() {
        if (this.selectedSite && this.selectedSite != '') {
            this.loadPrefixes()
        }
      },
      loadPrefixes:function() {
        this.error = null
        url = dutils.urls.resolve('bacnet_prefix_list_json', {site: this.selectedSite})
        axios.get(url)
          .then(
            x => {
              this.bacnetPrefixes = x.data.items
            }
          )
          .catch(err => {
            this.error = 'Error loading bacnet prefixes';
        });
      }
    }
  });
})();
</script>
{% endblock content %}
